import React, {useEffect, useState} from 'react';
import {Button, Card, Form, Input, message, Modal, Table, Tree} from 'antd';
import {reqAddRole, reqRoleList, reqUpdateRole} from '../../api';
import {PAGE_SIZE} from '../../utils/constants';
import {items} from '../../config/menuListConfig';
import {useNavigate} from 'react-router-dom'

import './index.less';
import memoryUtils from '../../utils/memoryUtils'
import {removeUser} from '../../utils/storageUtils'
import {formateDate} from '../../utils/dateUtils'

const { TreeNode } = Tree;

/**
 * 用户管理
 */
function Role(){
  // navigate跳转路由
  const navigate = useNavigate();
  /* 角色列表 */
  const [roleList,setRoleList] = useState([]);
  /* 选中角色 */
  const [role,setRole] = useState({});
  //是否展示新增和修改页面 0=关闭 1=新增 2=修改
  const [showStatus,setShowStatus] = useState(0);
  //角色权限菜单
  const [treeData,setTreeData] = useState([]);

  const columns = [
    {
      title: "角色名称",
      dataIndex: 'name',
    },
    {
      title: "创建时间",
      dataIndex: 'create_time',
      render: (create_time) => formateDate(create_time)
    },
    {
      title: "授权时间",
      dataIndex: 'auth_time',
      render: (auth_time) => formateDate(auth_time)
    },
    {
      title: "授权人",
      dataIndex: 'auth_name',
    }
  ];

  /**
   * 获取权限菜单
   */
  function getItemsList(menuList) {
    return menuList.reduce((pre, item) => {
      pre.push(
        <TreeNode title={item.title} key={item.key}>
          {item.children ? getItemsList(item.children) : null}
        </TreeNode>
      )
      return pre;
    }, []);
  }

  /**
   * 获取权限列表
   * @returns {Promise<void>}
   */
  async function getRoleList() {
    const response = await reqRoleList();
    if(response.status === 0){
      setRoleList(response.data);
    }
  }

  /**
   * 选中某行
   * @param role
   * @returns {{onClick: onClick}}
   */
  function onRow(role) {
    return {
      onClick: event => {
        // 点击行
        setRole(role);
      },
    }
  }

  /**
   * 展示新增角色页面
   */
  function showAddRole(){
    //打开add-form修改分类页面
    setShowStatus(1);
  }

  /**
   * 展示新增角色页面
   */
  function showUpdateRole(){
    //打开add-form修改分类页面
    setShowStatus(2);
  }

  /**
   * 新增角色
   * @param values 表单所有数据
   */
  async function onFinishAdd(values){
    //判断列表中新增名称是否已存在
    const role = roleList.find(function(role){
      return role.name === values.roleName;
    });
    //判断分类名称是否存在，如果存在则提示和返回
    if(role){
      message.error("该角色名称已存在！");
      return;
    }
    /* 添加角色 */
    const response = await reqAddRole(values.roleName);
    if(response.status === 0){
      message.success("新增角色成功！");
    }else {
      message.error("新增角色失败！");
    }
    //信息新增完之后自动关闭页面
    setShowStatus(0);
  }

  /**
   * 新增或者修改页面，取消点击事件
   */
  function handleCancel(){
    //点击取消关闭页面
    setShowStatus(0);
  }

  useEffect(function () {
    getRoleList().then();
    if (role._id) {
      console.log(role)
      const e = roleList.find(function (r) {
        return r._id === role._id
      })
      setRole(e);
    }
  },[showStatus])

  /**
   * 初始化调用一次，onFinishAdd方法变化时调用
   */
  useEffect(function () {
    getRoleList().then();
  },[onFinishAdd]);

  async function onCheck(checkedKeys) {
    role.menus = checkedKeys;
    role.auth_time = Date.now()
    role.auth_name = memoryUtils.user.username
    setRole(role);
  }

  async function updateRole() {
    setShowStatus(0);
    // 请求更新
    const result = await reqUpdateRole(role);
    if (result.status === 0) {
      message.success('设置角色权限成功')
    }
  }

  /**
   * 初始化调用一次
   */
  useEffect(function () {
    setTreeData(getItemsList(items));
  },[]);

  const title = (
    <span>
      <Button type="primary" onClick={showAddRole}>创建角色</Button>&nbsp;
      <Button type="primary" disabled={!role._id} onClick={showUpdateRole}>设置角色权限</Button>
    </span>
  )

  return (
    <div>
      <Card
        title={title}
      >
        <Table
          dataSource={roleList}
          columns={columns}
          rowKey="_id"
          pagination={{pageSize: PAGE_SIZE}}
          onRow={onRow}
          rowSelection={{
            type: 'radio',
            selectedRowKeys: [role._id],
            onSelect: function (role) {
              setRole(role);
            }
          }}
          bordered
          scroll
        />
      </Card>
      <Modal
        footer={null}
        destroyOnClose
        title="新增角色"
        open={showStatus === 1}
        onCancel={handleCancel}
      >
        <Form
          name="add-form"
          className="add-form"
          onFinish={onFinishAdd}
          //根据name展示默认值
          initialValues={{
            //Select框 指定value值
          }}
        >
          <Form.Item
            label="角色名称"
            name="roleName"
            rules={[
              { required: true,whitespace: true, message: "角色名称不能为空!" },
            ]}
          >
            <Input placeholder="请输入角色名称"/>
          </Form.Item>
          <Form.Item style={{textAlign: 'right'}}>
            <Button onClick={handleCancel} style={{marginRight: 10}}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              确定添加
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        destroyOnClose
        title="修改角色权限"
        open={showStatus === 2}
        onCancel={handleCancel}
        onOk={updateRole}
      >
        <Form.Item label="角色名称">
          <input disabled value={role.name}/>
        </Form.Item>
        <Tree
          checkable
          defaultExpandAll
          checkedKeys={role.menus}
          onCheck={onCheck}
        >
          <TreeNode title="平台权限" key="all">
            {treeData}
          </TreeNode>
        </Tree>
      </Modal>
    </div>
  );
}

export default Role;